import React, { Component } from 'react';
import './App.css';
import { Input } from 'antd';
import { Button } from 'antd';
import { Row, Col } from 'antd';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list:[],
      value:""
    };
  }

  addlist() {
    let list = JSON.parse(JSON.stringify(this.state.list))
    list.push(this.state.value)
    this.setState({
      value: '',
      list // list: list
    })
  }
  changeValue(e) {
    e.persist()
    let v = e.target.value;
    this.setState({
      value:v
    })
  }
  render() {
    const { list, value } = this.state;
    return (
      <div className={ "box" }>
        <Row type="flex" justify="start">
          <Col span={20}><Input value={value} placeholder="请输入内容" className={ "input" } onChange={this.changeValue.bind(this)}/></Col>
          <Col span={4}><Button type="primary"  onClick={this.addlist.bind(this)}>按钮</Button></Col>
        </Row>
        <div>
            <ul>
              { list.map((item, i) => {
                return <li key={i}>{item}</li>
              })}
            </ul>
        </div>
      </div>
    );
  }
}

export default App;
